<template>
	<view>
		<view class="title-area">

			<view class="index-content">
				<view class="title-weather">
					<view>
						<uni-data-select v-model="value" :localdata="range" @change="change"></uni-data-select>
					</view>
					<text class="weather">{{weather}}</text>
				</view>




				<!-- 			 <view class="search-bar">
							 <view class="search-bar-box">
							 <image class="search-span" src="../../static/img/tabbar/home.png"/>
							 <input type="text" value=""  placeholder="请输入搜索内容" class="search-text" maxlength="10" focus/>
							 <button class="search-btn">搜索</button>
							 </view>
						 </view> -->
			</view>
			<view class="search-bar">
				<view class="search-bar-box">
					<image class="search-span" src="../../static/img/tabbar/home.png" />
					<input type="text" value="" placeholder="请输入搜索内容" class="search-text" maxlength="10" focus />
					<button class="search-btn">搜索</button>
				</view>
			</view>
		</view>

		<!-- <Navbar :hideBtn="true" title="首页" bgColor="#fff" :h5Show="false" :fixed="false"></Navbar> -->
		<view class="backgroundBanner" :style="{backgroundColor:backColor}">
			<view class="banner">
				<swiper autoplay="true" :interval="2000" :duration="500" circular="true" indicator-active-color="#fff"
					easing-function="true" indicator-dots='true' @change="swiperChange">
					<swiper-item v-for="(item, index) in bannerList" :key="index">
						<image :src="item.url"></image>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<uni-notice-bar scrollable showIcon="true" single :text="list[0].noticeTitle"></uni-notice-bar>
		<view style="padding: 10rpx; background-color: #fff; margin-top: 0rpx;" class="ugitWrap">
			<view class="index-block-title">热门应用</view>
			<u-grid col="3">
				<u-grid-item @click="navigateTo('/pages/work/notice/manage')">
					<view class="iconfont icon-pengyouquan"></view>
					<text class="btn-text">村圈</text>
				</u-grid-item>
				<u-grid-item @click="navigateTo('/pages/index/pointsPass')">
					<view class="iconfont icon-icon"></view>
					<text class="btn-text">积分通</text>
				</u-grid-item>
				<u-grid-item @click="navigateTo('/pages/index/informationEntry')">
					<view class="iconfont icon-dengjibiaoge"></view>
					<text class="btn-text">一表通</text>
				</u-grid-item>
			</u-grid>

		</view>

		<view style="padding: 10rpx; background-color: #fff; margin-top: 0rpx;" class="ugitWrap">
			<view class="index-block-title">全部应用</view>
			<u-grid col="3">
				<u-grid-item @click="navigateTo('/pages/work/notice/manage')">
					<view class="iconfont icon-pengyouquan"></view>
					<text class="btn-text">村圈</text>
				</u-grid-item>
				<u-grid-item @click="navigateTo('/pages/work/user/list')">
					<!--   <u-icon name="list" color="#2979ff" size="60rpx"></u-icon> -->
					<view class="iconfont icon-chaxun"></view>
					<text class="btn-text">用户查询</text>
				</u-grid-item>
				<u-grid-item @click="navigateTo('/pages/index/pointsPass')">
					<view class="iconfont icon-icon"></view>
					<text class="btn-text">积分通</text>
				</u-grid-item>
				<u-grid-item @click="navigateTo('/pages/index/informationEntry')">
					<view class="iconfont icon-dengjibiaoge"></view>
					<text class="btn-text">一表通</text>
				</u-grid-item>
				<u-grid-item @click="navigateTo('/pages/index/workBench')">
					<view class="iconfont icon-qingdan"></view>
					<text class="btn-text">清单通</text>
				</u-grid-item>
				<u-grid-item @click="navigateTo('/pages/index/party')">
					<view class="iconfont icon-dangjian_xuexijiaoyu"></view>
					<text class="btn-text">党建</text>
				</u-grid-item>
				<u-grid-item @click="navigateTo('/pages/index/countryside')">
					<view class="iconfont icon-jianzhu_xiangcun"></view>
					<text class="btn-text">乡村信息官</text>
				</u-grid-item>
				<u-grid-item @click="navigateTo('/pages/index/rank')">
					<view class="iconfont icon-paihangbang"></view>
					<text class="btn-text">排行榜</text>
				</u-grid-item>
				<u-grid-item @click="navigateTo('/pages/index/analyse')">
					<view class="iconfont icon-tongji"></view>
					<text class="btn-text">村落人数统计</text>
				</u-grid-item>
				<u-grid-item @click="navigateTo('/pages/index/audit')">
					<view class="iconfont icon-tongji"></view>
					<text class="btn-text">审核</text>
				</u-grid-item>
			</u-grid>

		</view>
	</view>
</template>

<script>
	import Navbar from '@/components/navbar/Navbar'
	import Gap from '@/components/gap/Gap'
	import * as NoticeApi from '@/api/work/notice'

	let _now = new Date();
	let now_time = {};
	now_time.year = _now.getFullYear()
	now_time.month = _now.getMonth() + 1
	now_time.day = _now.getDay()

	export default {
		components: {
			Navbar,
			Gap
		},
		data() {
			return {
				isCanvas2d: true,
				delayload: false,
				searchValue: 0,
				onlinePeople: 1000,
				weather: '35° 南风2级 相对湿度75%',
				list: [],
				bannerList: [{
						url: '../../static/img/数字乡村1.png',
						color: 'red'
					},
					{
						url: '../../static/img/数字乡村2.jpg',
						color: 'green'
					},
					{
						url: '../../static/img/数字乡村3.jpg',
						color: 'blue'
					},
				],
				backColor: '',
				params: {
					pageNum: 0,
					pageSize: 10
				},
				historyData: {
					"categories": [
						"1月",
						"2月",
						"2月",
						"4月",
						"5月"
					],
					"series": [{
						"name": "党员",
						"data": [1601, 1840.5, 1900, 1760, 1500.85],
						"type": "line",
						"style": "curve",
						"color": "#4ECDB6",
						"unit": ""
					}],
					"yAxis": [{
						"calibration": true,
						"position": "left",
						"title": "单位/元",
						"titleFontSize": 12,
						"unit": "",
						"tofix": 0,
						"min": 0,
						"disableGrid": true
					}]
				},
				detail_list: [{
						date: now_time.month + "-01",
						time: "11:01",
						"type": "extend",
						money: "10.00",
						desc: "银行卡转出"
					},
					{
						date: now_time.month + "-01",
						time: "13:45",
						"type": "income",
						money: "18.00",
						desc: "银行卡收入"
					},
					{
						date: now_time.month + "-02",
						time: "06:21",
						"type": "extend",
						money: "123.45",
						desc: "信用卡转出"
					},
					{
						date: now_time.month + "-03",
						time: "07:38",
						"type": "income",
						money: "23.00",
						desc: "银行卡收入"
					},
					{
						date: now_time.month + "-08",
						time: "16:28",
						"type": "extend",
						money: "23.56",
						desc: "信用卡转出"
					},
					{
						date: now_time.month + "-09",
						time: "15:25",
						"type": "income",
						money: "850.12",
						desc: "银行卡收入"
					},
					{
						date: now_time.month + "-09",
						time: "18:52",
						"type": "income",
						money: "1.88",
						desc: "银行卡收入"
					},
					{
						date: now_time.month + "-11",
						time: "21:12",
						"type": "extend",
						money: "220.21",
						desc: "银行卡转出"
					},
					{
						date: now_time.month + "-12",
						time: "13:08",
						"type": "income",
						money: "32.28",
						desc: "银行卡收入"
					},
					{
						date: now_time.month + "-12",
						time: "12:41",
						"type": "extend",
						money: "122.12",
						desc: "信用卡转出"
					},
					{
						date: now_time.month + "-13",
						time: "17:21",
						"type": "income",
						money: "10.00",
						desc: "银行卡收入"
					},
				],
				value: 0,
				range: [{
						value: 0,
						text: "华西村",
						weather: "35° 南风2级 相对湿度75%"
					},
					{
						value: 1,
						text: "贾庄村",
						weather: "26° 南风3级 相对湿度55%"
					},
					{
						value: 2,
						text: "区翟村",
						weather: "31° 南风1级 相对湿度45%"
					},
					{
						value: 3,
						text: "大坝村",
						weather: "27° 北风2级 相对湿度80%"
					},
					{
						value: 4,
						text: "牛村",
						weather: "19° 南风2级 相对湿度50%"
					},
					{
						value: 5,
						text: "马村",
						weather: "23° 南风1级 相对湿度60%"
					},
					{
						value: 6,
						text: "羊村",
						weather: "28° 南风2级 相对湿度60%"
					},
				],
				activeKey: 'work',
				todo: {
					notice: 2,
					task: 5,
					error: 1
				}
			}
		},
		created() {
			this.loadData()
			console.log(this.list)
		},
		methods: {
			change(e) {
				const range = this.range;
				for (var i = 0; i < range.length; i++) {
					if (e == range[i].value) {
						this.weather = range[i].weather
					}
				}
			},
			tabChange(item) {
				this.activeKey = item.key;
			},
			navigateTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			changeIndicatorDots(e) {
				this.indicatorDots = !this.indicatorDots
			},
			changeAutoplay(e) {
				this.autoplay = !this.autoplay
			},
			intervalChange(e) {
				this.interval = e.target.value
			},
			durationChange(e) {
				this.duration = e.target.value
			},
			swiperChange() {

			},
			loadData() {
				const app = this
				this.params.pageNum = 1;
				NoticeApi.noticeList(this.params).then(res => {
					app.list = res.rows;
					app.list=app.list.reverse()
				})
			}
		}
	}
</script>

<style lang="scss">
	@import '../../static/iconfont1/iconfont.css';


	.adsec {
		width: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		background: #66b79d;
		height: 50rpx;
	}

	.adsec icon {
		display: flex;
		margin-right: 10rpx;
	}

	.adsec iconfont {
		display: flex;
		margin-right: 10rpx;
	}

	.swiper_container {
		height: 55rpx;
		width: 80%;
		line-height: 55rpx;
		padding-left: 10rpx;
	}

	.swiper_item {
		font-size: 25rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		letter-spacing: 2px;
	}

	.title-area {
		background-image: url('https://weic.nxlifebao.com/images/village/index2/index_bg.png')
	}

	.index-block-title {
		font-size: 40rpx;
		font-weight: bold;
		padding: 0 0 40rpx 0;
	}

	.item-tj {
		width: 100%;
		height: 160rpx;
		border-radius: 16rpx;

		&-frist {
			background-color: rgba($color: #2979ff, $alpha: 0.8);
			// background-image: url('/static/img/bg/qb.png');
		}

		&-second {
			background-color: rgba($color: #303133, $alpha: 0.8);
			// background-image: url('/static/img/bg/qb.png');
		}

		&-thrid {
			background-color: rgba($color: #19be6b, $alpha: 0.8);
			// background-image: url('/static/img/bg/qb.png');
		}
	}

	.detail_list {
		height: 700rpx;
		overflow: auto;
		color: #9E9E9E;

		.detail_item {
			display: flex;
			margin: 20rpx 0;
			align-items: center;

			.icon {
				width: 30%;
				text-align: center;

				li {
					font-size: 80rpx;
				}
			}

			.right_content {
				width: 50%;
				text-align: center;
			}

			.icon-income {
				color: #4AABF9;
			}

			.icon-expend {
				color: #E45521;
			}

			.money {
				color: #000;
			}
		}
	}

	.search-bar {
		width: 100%;
		height: 100rpx;
		margin-top: 2%;
	}

	.search-bar-box {
		display: flex;
		margin: 0 auto;
		width: 360px;
		height: 70rpx;
		border: 5rpx solid #00a8cc;
		border-radius: 50rpx;
		color: white;
		background-color: white;
	}

	.search-span {
		width: 100rpx;
		height: 56rpx;
		margin-top: 6rpx;
		margin-left: 30rpx;
	}

	.search-text {
		width: 100%;
		margin-top: 10rpx;
		margin-left: 20rpx;
		font-size: 30rpx;
		color: #7f7f81;
	}

	.search-btn {
		background-color: #00a8cc;
		/* Green */
		color: white;
		text-align: center;
		display: inline-block;
		font-size: 35rpx;
		width: 240rpx;
		height: 70rpx;
		line-height: 65rpx;
		border-radius: 30rpx;
		letter-spacing: 3rpx;
	}

	.ugitWrap {
		.u-grid-item {
			height: 100px;
		}
	}

	.backgroundBanner {
		box-sizing: border-box;
	}

	.banner {
		width: 100%;
		margin: 0 auto;
	}

	.banner swiper {
		height: calc(750rpx / 1.9); //calc(屏幕宽度 / (图片宽度 / 图片高度))
	}

	.banner image {
		width: 100%;
		height: 100%;
	}

	.title-weather {
		display: flex;
	}

	.weather {
		font-size: 1px;
		padding: 10px;
		margin: 0 0 0 35%;
	}
</style>
